<template>
  <div class="facilityAlarmColor">
    <el-row class="facilityAlarmColor-a height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{facilityManagement.facilityAlarmColor}}</span>
    </el-row>
    <el-row class="facilityAlarmColor-b">
      <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-position="top"
      class="demo-ruleForm"
    >
        <el-form-item :label="facilityManagement.messageColor" prop="messageColor">
          <el-row>
            <el-col :span="4">
              <el-color-picker
                v-model="ruleForm.messageColor"
                show-alpha
                @change="changeMessageColor"
                :predefine="predefineColors">
              </el-color-picker>
            </el-col>
            <el-col class="facilityManagement-e-div" :span="4">
              <div class="facilityManagement-e-div-commom" :style="messageColorStyle"></div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item :label="facilityManagement.earlyWarningColor" prop="earlyWarningColor">
          <el-row>
            <el-col :span="4">
              <el-color-picker
                v-model="ruleForm.earlyWarningColor"
                show-alpha
                @change="changeEarlyWarningColor"
                :predefine="predefineColors">
              </el-color-picker>
            </el-col>
            <el-col class="facilityManagement-e-div" :span="4">
              <div class="facilityManagement-e-div-commom" :style="earlyWarningColorStyle"></div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item :label="facilityManagement.alarmLanguageColor" prop="alarmLanguageColor">
          <el-row>
            <el-col :span="4">
              <el-color-picker
                v-model="ruleForm.alarmLanguageColor"
                show-alpha
                @change="changeAlarmLanguageColor"
                :predefine="predefineColors">
              </el-color-picker>
            </el-col>
            <el-col class="facilityManagement-e-div" :span="4">
              <div class="facilityManagement-e-div-commom" :style="alarmLanguageColorStyle"></div>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item :label="facilityManagement.alarmColor" prop="alarmColor">
          <el-row>
            <el-col :span="4">
              <el-color-picker
                v-model="ruleForm.alarmColor"
                show-alpha
                @change="changeAlarmColor"
                :predefine="predefineColors">
              </el-color-picker>
            </el-col>
            <el-col class="facilityManagement-e-div" :span="4">
              <div class="facilityManagement-e-div-commom" :style="alarmColorStyle"></div>
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 强制停止 -->
        <el-form-item :label="facilityManagement.stopColor" prop="stopColor">
          <el-row>
            <el-col :span="4">
              <el-color-picker
                v-model="ruleForm.stopColor"
                show-alpha
                @change="changestopColor"
                :predefine="predefineColors">
              </el-color-picker>
            </el-col>
            <el-col class="facilityManagement-e-div" :span="4">
              <div class="facilityManagement-e-div-commom" :style="stopColorStyle"></div>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item :label="facilityManagement.offlineColor" prop="offlineColor">
          <el-row>
            <el-col :span="4">
              <el-color-picker
                v-model="ruleForm.offlineColor"
                show-alpha
                @change="changeofflineColor"
                :predefine="predefineColors">
              </el-color-picker>
            </el-col>
            <el-col class="facilityManagement-e-div" :span="4">
              <div class="facilityManagement-e-div-commom" :style="offlineColorStyle"></div>
            </el-col>
          </el-row>
        </el-form-item>

        <!-- //強制停止フォント設定 -->
        <el-row class="facilityAlarmColor-a height40" style="margin-left:-30px;marginbottom:10px">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">強制停止フォント設定</span>
        </el-row>
        <el-row class="staffCompile-a">
          <el-form-item label="フォントサイズ設定" prop="stopfontsize">
            <!-- <p class="stopfont" :style="{fontSize: ruleForm.stopfontsize*2 + 12 + 'px' }">強制停止中巡回強化</p> -->
            <el-select v-model="ruleForm.stopfontsize" class="selectin" id="select" @change="changesize" style="width:300px">
              <el-option label="強制停止中巡回強化" value="0" style="font-size:15px"></el-option>
              <el-option label="強制停止中巡回強化" value="1"></el-option>
              <el-option label="強制停止中巡回強化" value="2"></el-option>
              <el-option label="強制停止中巡回強化" value="3"></el-option>
              <el-option label="強制停止中巡回強化" value="4"></el-option>
              <el-option label="強制停止中巡回強化" value="5"></el-option>
              <el-option label="強制停止中巡回強化" value="6"></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-form-item>
          <el-row>
            <el-col :span="12">
              <Kt-button class="cancelBtn boxShadowButton" :size="size" :label="facilityManagement.cancel" @click="cancel"></Kt-button>
            </el-col>
            <el-col :span="12" align="right">
              <Kt-button class="submitBtn boxShadowButton" :size="size" :label="facilityManagement.update" @click="submitForm('ruleForm')"></Kt-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import KtButton from "@/components/KtButton";
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
import juxing_Small from "../../../assets/lifeGroupimg/juxing_small.png";
export default {
  name:"FacilityAlarmColor",
  data(){
    return {
      facilityManagement: this.$t("m.facilityManagement"), //引入 lang 里面的字符串资源,
      size:"mini",//按钮的尺寸
      image:{juxing_Small,},
      ruleForm:{
        messageColor: '#22ac38',//提示語色
        earlyWarningColor: '#f9d004',//早期警報語色
        alarmLanguageColor: '#ff0000',//警報語色
        alarmColor: '#3a77e2',//警報色
        offlineColor:'#3a77e2',//离线
        stopColor: '#3a77e2', //强制停止文字
        stopfontsize:'0',
      },
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        'rgba(247, 15, 7, 1)'
      ],
      messageColorStyle:{
        backgroundColor:'#22ac38',
      },
      earlyWarningColorStyle:{
        backgroundColor:'#f9d004',
      },
      alarmLanguageColorStyle:{
        backgroundColor:'#ff0000',
      },
      alarmColorStyle:{
        backgroundColor:'#3a77e2',
      },
      offlineColorStyle:{
        backgroundColor:'#3a77e2',
      },
      stopColorStyle:{
        backgroundColor:'#3a77e2',
      },
      alarmColorFlag:"",
      acceptLanguage:'ja_JP',//数据请求传参需要传的语言  ja_JP----日文
    }
  },
  methods:{
    /* 
      提示语色
    */
    changeMessageColor(val){
      console.log(val);
      this.messageColorStyle.backgroundColor=val;
      this.ruleForm.messageColor=val;
    },

    /* 
      早期警报语色
    */
    changeEarlyWarningColor(val){
      console.log(val);
      this.earlyWarningColorStyle.backgroundColor=val;
      this.ruleForm.earlyWarningColor=val;
    },

    /* 
      警报语色
    */
    changeAlarmLanguageColor(val){
      console.log(val);
      this.alarmLanguageColorStyle.backgroundColor=val;
      this.ruleForm.alarmLanguageColor=val;
    },

    /* 
      警报色
    */
    changeAlarmColor(val){
      console.log(val);
      this.alarmColorStyle.backgroundColor=val;
      this.ruleForm.alarmColor=val;
    },
    changestopColor(val){

      this.stopColorStyle.backgroundColor=val;
      this.ruleForm.stopColor=val;
    },
    /* 
      警报色
    */
    changeofflineColor(val){
      console.log(val);
      this.offlineColorStyle.backgroundColor=val;
      this.ruleForm.offlineColor=val;
    },

    /* 
      取消
    */
    cancel(){
      console.log("跳转")
      bus.$emit("homePage",{type:"remove",path:"/FacilityAlarmColor",showpath:"/FacilityManagement"});
    },

    /* 
      更新
    */
    submitForm(datainfo){
      console.log(datainfo,"------");
      this.$refs[datainfo].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
          let params=new Array();
          let dmcHintColorDtoList=new Array();
          dmcHintColorDtoList.push(
            {
              color:this.ruleForm.messageColor,
              // hintName:"提示語",
              hintTypeId:"1"
            },
            {
              color:this.ruleForm.earlyWarningColor,
              // hintName:"早期警報語",
              hintTypeId:"2"
            },
            {
              color:this.ruleForm.alarmLanguageColor,
              // hintName:"警報語",
              hintTypeId:"3"
            },
            {
              color:this.ruleForm.alarmColor,
              // hintName:"警報",
              hintTypeId:"4"
            },
            {
              color:this.ruleForm.offlineColor,
              // hintName:"警報",
              hintTypeId:"5"
            },
            {
              color:this.ruleForm.stopColor,
              // hintName:"警報",
              hintTypeId:"6",
              fontSize:this.ruleForm.stopfontsize
            },
          )
          params=dmcHintColorDtoList;
          console.log(params);
          console.log(this.alarmColorFlag);
          var url="";
          //this.alarmColorFlag==true就调取修改的接口,  否则调新增的接口
          url=this.alarmColorFlag==true ? this.ports.facilityManagement.updateAlarmColor : this.ports.facilityManagement.addAlarmColor;
          console.log(url);
          this.$postJson(url,params,this.acceptLanguage).then(res=>{
            console.log(res);
            if(res.code==200){
              this.$message({message:res.message,type:"success"});
              setTimeout(()=>{
                bus.$emit("homePage",{type:"remove",path:"/FacilityAlarmColor",showpath:"/FacilityManagement"});
                bus.$emit("refreshAlarmColor");//通知设施管理页面刷新颜色
                bus.$emit("refreshLifeAlarmMain");//通知首页刷新颜色 自己推送自己,需要删除
                bus.$emit("refreshRoomGeneralViewColor");//通知房间一览刷新颜色
              },100)
            }else{  
              this.$message({message:res.message,type:"error"});
            }
          })
        }else{
          console.log('提交失败!');
          return false;
        }
      })
    },
    changesize(val){
        var size = val*2 + 12;
        var selectEl = document.getElementById('select');
        selectEl.style.fontSize = size+ 'px';
    },
    /* 
      查询警报色是否设置
    */
    queryAlarmColor(){
      this.$postForm(this.ports.facilityManagement.queryAlarmColor,{},this.acceptLanguage).then(res=>{
        console.log(res,"是否设置了");
        if(res.code==200){
          if(res.result!=null && res.result.length!=0){
            this.alarmColorFlag=true;//报警色设置存在
            res.result.forEach(item=>{
              if(item.hintTypeId==1){
                this.messageColorStyle.backgroundColor=item.color;
                this.ruleForm.messageColor=item.color;
              }else if(item.hintTypeId==2){
                this.earlyWarningColorStyle.backgroundColor=item.color;
                this.ruleForm.earlyWarningColor=item.color;
              }else if(item.hintTypeId==3){
                this.alarmLanguageColorStyle.backgroundColor=item.color;
                this.ruleForm.alarmLanguageColor=item.color;
              }else if(item.hintTypeId==4){
                this.alarmColorStyle.backgroundColor=item.color;
                this.ruleForm.alarmColor=item.color;
              } else if(item.hintTypeId == 5){
                this.offlineColorStyle.backgroundColor = item.color;
                this.ruleForm.offlineColor=item.color;
              } else if(item.hintTypeId == 6){
                this.stopColorStyle.backgroundColor = item.color;
                this.ruleForm.stopColor=item.color;
                this.ruleForm.stopfontsize = item.fontSize;
                if(this.ruleForm.stopfontsize>6){
                  this.ruleForm.stopfontsize = '2';
                }
                var size = this.ruleForm.stopfontsize*2 + 12;
                var selectEl = document.getElementById('select');
                selectEl.style.fontSize = size+ 'px';
              }
            })
          }else{
            this.alarmColorFlag=false;//报警色设置不存在
          }
        }
      })
    },
  },
  computed: {//使用computed计算属性来操作form表单规则的国际化
    rules() {//此处的rules 是你声明的名字，参考下图
      var validate_Types = (rule, value, callback) => {
        //兑换类型规则
        if (this.ruleForm.messageColor == "") {
          callback(new Error(this.$t("m.facilityManagement.empty")));
        }
        callback();
      };
      return {
        facilityManagement: this.$t("m.facilityManagement"), //引入 lang 里面的字符串资源,
        //注意此处的return，别忘记了
        // messageColor: [
        //   {required:true, validator: validate_Types, trigger: "change" },
        // ],
        stopfontsize: [
          {
            required: true,
            message: this.$t("m.facilityManagement.empty"),
            trigger: "blur"
          },
        ],
        messageColor: [
          {
            required: true,
            message: this.$t("m.facilityManagement.empty"),
            trigger: "change"
          },
        ],
        earlyWarningColor: [
          {
            required: true,
            message: this.$t("m.facilityManagement.empty"),
            trigger: "change"
          },
        ],
        alarmLanguageColor: [
          {
            required: true,
            message: this.$t("m.facilityManagement.empty"),
            trigger: "change"
          },
        ],
        alarmColor: [
          {
            required: true,
            message: this.$t("m.facilityManagement.empty"),
            trigger: "change"
          },
        ],
        offlineColor: [
          {
            required: true,
            message: this.$t("m.facilityManagement.empty"),
            trigger: "change"
          },
        ],
      };
    }
  },
  created() {
    
  },
  mounted() {
    this.queryAlarmColor();
    var el = document.getElementsByClassName('el-select-dropdown__item');
    el[0].style.fontSize = '12px';
    el[1].style.fontSize = '14px';
    el[2].style.fontSize = '16px';
    el[3].style.fontSize = '18px';
    el[4].style.fontSize = '20px';
    el[5].style.fontSize = '22px';
    el[6].style.fontSize = '24px';


  },
  components:{
    KtButton,
  }
}
</script>
<style lang="scss" scoped>
  .facilityAlarmColor{
    padding-bottom:20px;
    .height40{
      height: 40px;
      line-height: 40px;
      .height40-span {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: 700;
        img {
          vertical-align: middle;
          margin-right: 15px;
        }
      }
    }
    .facilityAlarmColor-b{
      width:50%;
      padding:20px 30px;
      .select100{
        width: 100%;
      }
      /* 取消按钮  修改样式 添加阴影 */
      .cancelBtn{
        background: #dddddd;
        color:#010101;
      }
      /* 更新按钮  修改样式  添加阴影 */
      .submitBtn{
        background: #E6A23C;;
        color:#ffffff;
      }
      .facilityManagement-e-div{
          .facilityManagement-e-div-commom{
            text-align: center;
            width:80px;
            height:25px;
            line-height: 25px;
            margin-top:7px;
          }
        }
    }
  }
  /* 修改element-ui input文本框默认的样式 */
  /deep/ .facilityAlarmColor-b .el-input__inner{
    border:none !important;
    border-radius:0px !important;
    border-bottom:1px solid #999999 !important;
    background-color: #f6f6f6 !important;
  }

  /* 修改每一个form表单小项的margin */
  /deep/ .facilityAlarmColor-b .el-form-item {
    margin-bottom: 20px !important;
  }

  /* 修改element-ui 表格label的样式 */
  /deep/ .facilityAlarmColor-b .el-form-item__label {
    padding: 0 0 0px !important;
    line-height: 30px !important;
    color:#0000ff !important;
  }

  /* 修改element-ui input文本框默认的样式 */
/deep/ .staffCompile-a .el-input__inner {
  border: none !important;
  border-radius: 0px !important;
  width: 200px;
  background-color: #f6f6f6 !important;
}
/deep/ .staffCompile-a .el-select {
  border: 1px solid #cccccc;
  border-radius: 5px;
  margin-top: 10px;
}
/* 修改每一个form表单小项的margin */
/deep/ .staffCompile-a .el-form-item {
  margin-bottom: 22px !important;
}

/* 修改element-ui 表格label的样式 */
/deep/ .staffCompile-a .el-form-item__label {
  padding: 0 0 0px !important;
  line-height: 10px !important;
  color: #0000ff !important;
}
.stopfont{
  margin: 8px;
  color: red;
}
.selectin /deep/ .el-input__inner{
  width: 280px;
}

</style>